<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '0px 15px' }">
      <div slot="header" class="group-header">
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-plus"
          @click="addGroup"
          >添加群组</el-button
        >
      </div>
      <el-table
        :data="pager.records"
        style="width: 100%"
        stripe
        highlight-current-row
        v-loading="$store.state.loading"
        @selection-change="onSelectionChange"
      >
        <el-table-column
          prop="groupName"
          label="小组名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="groupName"
          label="小组简介"
          width="400"
        ></el-table-column>
        <el-table-column
          prop="groupUser"
          label="组长"
          width="120"
        ></el-table-column>
        <el-table-column label="席位" width="120">
          <template slot-scope="scope">
            {{ scope.row.count }}
            <!-- {{ scope.row.birthday | moment("YYYY-MM-DD hh:mm") }} -->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="remove(scope.row.groupI点)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pager.current"
        :page-size="pager.size"
        :total="pager.total"
        class="pagination text-right"
        :page-sizes="$store.state.paginationPageSizes"
        :layout="$store.state.paginationLayout"
      ></el-pagination>
    </el-card>
    <group-dialog
      :titleName="groupTitle"
      :dialogShow="isShowDialog"
      :groupInfo="groupInfo"
      @closeDialog="closeDialogEvent"
    ></group-dialog>
  </div>
</template>
<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
<script>
import groupDialog from "@/components/groupDialog.vue";
export default {
  name: "group",
  components: {
    groupDialog
  },
  data() {
    return {
      isShowDialog: false,
      groupTitle: "添加组名",
      groupInfo: {},
      pager: { current: 1, size: 10, total: 0, records: [] }
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    addGroup() {
      this.isShowDialog = true;
      this.groupTitle = "添加群组";
    },
    query() {
      this.$http.get("/user").then(res => {
        this.pager = res.data;
      });
    },
    edit(groupInfo) {
      this.groupTitle = "修改群组";
      this.groupInfo = groupInfo;
      this.isShowDialog = true;
    },
    onSelectionChange(rows) {
      this.selectedRows = rows.map(item => item.userId);
    },
    remove() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
    },
    // onRemoveFile(file) {
    //   this.$http.delete(`/oss/remove/${this.bucketName}/${file.response}`);
    // },
    closeDialogEvent() {
      console.log("显示 ");
      this.isShowDialog = false;
    }
  }
};
</script>
<style scoped>
/deep/ .el-card__header {
  border: 0;
}
.group-header {
  border: 0;
  float: right;
}
</style>
